// app/admin/users/page.jsx
'use client';

import { useState, useEffect } from 'react';
import api from "../../apis/api";
import { toast } from 'react-toastify';
export default function SubscriptionsPage() {
    const [adminEmails, setAdminEmails] = useState([]);
    const [showModal, setShowModal] = useState(false);
    const [newAdminEmail, setAdminEmail] = useState({
        email: '',
        smtp_server: '',
        smtp_port: '',
        username: '',
        password: '',
        is_default: false
    });
    const menu = "邮件"
    useEffect(() => {
        fetchObjects();
    }, []);

    const fetchObjects = async () => {
        try {
            const response = await api.get('/api/v2/admin_emails/');
            if (response.status === "success") {
                setAdminEmails(response.data);
            }
        } catch (error) {
            console.error('获取对象数据失败:', error);
        }
    };

    const handleInputChange = (e) => {
        const { name, value, type, checked } = e.target;
        setAdminEmail(prev => ({
            ...prev,
            [name]: type === 'checkbox' ? checked : value
        }));
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const response = await api.post('/api/v2/admin_emails/', newAdminEmail);
            if (response.status === "success") {
                setShowModal(false);
                fetchObjects();
            } else {
                toast.error(menu + '创建错误2' + response.message);
            }
        } catch (error) {
            console.error(`${menu}创建失败: ${error}`);
        }
    };

    return (
        <div className="p-4 space-y-4">
            <h1 className="text-2xl font-bold text-gray-800">{menu}管理</h1>
            <div className="flex justify-between">
                <button onClick={fetchObjects} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    获取{menu}数据
                </button>
                <button onClick={() => setShowModal(true)} className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                    添加{menu}
                </button>
            </div>
            <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                <tr>
                    <th scope="col" className="px-6 py-3">ID</th>
                    <th scope="col" className="px-6 py-3">邮箱</th>
                    <th scope="col" className="px-6 py-3">smtp_server</th>
                    <th scope="col" className="px-6 py-3">smtp_port</th>
                    <th scope="col" className="px-6 py-3">用户名</th>
                    <th scope="col" className="px-6 py-3">密钥</th>
                    <th scope="col" className="px-6 py-3">是否为默认</th>
                    <th scope="col" className="px-6 py-3">创建时间</th>
                </tr>
                </thead>
                <tbody>
                {adminEmails.map && adminEmails.map((obj) => (
                    <tr key={obj.id} className="bg-white border-b dark:bg-gray-900 dark:border-gray-700">
                        <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            {obj.id}
                        </th>
                        <td className="px-6 py-4">{obj.email}</td>
                        <td className="px-6 py-4">{obj.smtp_server}</td>
                        <td className="px-6 py-4">{obj.smtp_port}</td>
                        <td className="px-6 py-4">{obj.username}</td>
                        <td className="px-6 py-4">{obj.password}</td>
                        <td className="px-6 py-4">{obj.is_default ? "是" : "否"}</td>
                        <td className="px-6 py-4">{obj.created_at}</td>
                    </tr>
                ))}
                </tbody>
            </table>

            {showModal && (
                <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
                    <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
                        <h3 className="text-lg font-bold mb-4">添加新{menu}</h3>
                        <form onSubmit={handleSubmit}>
                            <div className="mb-4">
                                <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="username">
                                    邮箱
                                </label>
                                <input
                                  type="email"
                                  id="email"
                                  name="email"
                                  value={newAdminEmail.email}
                                  onChange={handleInputChange}
                                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                  required
                                />
                            </div>
                            <div className="mb-4">
                                <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
                                    smtp_server
                                </label>
                                <input
                                  type="text"
                                  id="smtp_server"
                                  name="smtp_server"
                                  value={newAdminEmail.smtp_server}
                                  onChange={handleInputChange}
                                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                  required
                                />
                            </div>
                            <div className="mb-4">
                                <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
                                    smtp_port
                                </label>
                                <input
                                  type="number"
                                  id="smtp_port"
                                  name="smtp_port"
                                  value={newAdminEmail.smtp_port}
                                  onChange={handleInputChange}
                                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                  required
                                />
                            </div>
                            <div className="mb-4">
                                <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="points">
                                    用户名
                                </label>
                                <input
                                  type="text"
                                  id="username"
                                  name="username"
                                  value={newAdminEmail.username}
                                  onChange={handleInputChange}
                                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                />
                            </div>
                            <div className="mb-4">
                                <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="points">
                                    密码
                                </label>
                                <input
                                  type="text"
                                  id="password"
                                  name="password"
                                  value={newAdminEmail.password}
                                  onChange={handleInputChange}
                                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                />
                            </div>
                            <div className="mb-4">
                                <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="points">

                                    <input
                                      type="checkbox"
                                      id="is_default"
                                      name="is_default"
                                      value={newAdminEmail.is_default}
                                      onChange={handleInputChange}
                                      className="mr-2"
                                    />
                                    <span className="text-gray-700 text-sm font-bold">是否为默认邮箱</span>
                                </label>

                            </div>
                            <div className="flex items-center justify-between">
                                <button
                                  type="submit"
                                  className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                                >
                                    提交
                                </button>
                                <button
                                  type="button"
                                  onClick={() => setShowModal(false)}
                                  className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                                >
                                    取消
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            )}
        </div>
    );
}